<template>
	<view>
		<view class="mainIndex">
			<home v-if="PageCur=='home'"></home> <!-- 首页 -->
			<!-- <motion v-if="PageCur=='motion'"></motion> 运动 --> 
			<plan v-if="PageCur=='plan'"></plan> <!-- 运动 -->
			<ble v-if="PageCur=='ble'"></ble> <!-- 设备蓝牙 -->
			<goal v-if="PageCur=='goal'"></goal> <!-- 目标 -->
			<mine v-if="PageCur=='mine'"></mine> <!-- 我的 -->
		</view>
		
		<view class="cu-bar tabbar bg-white shadow foot mainCD" :style="{zIndex:isTop?'999999':'99'}" >
			<view class="action" :class="PageCur=='home'?'text-black':'text-gray'" @click="NavChange" data-cur="home">
				<view class="cuIcon-homefill"></view> 日记
			</view>
			<view class="action" :class="PageCur=='plan'?'text-black':'text-gray'" @click="NavChange" data-cur="plan">
				<view class="cuIcon-footprint"></view> 计划表
			</view>
<!-- 			<view class="action text-gray add-action" @click="NavChange" data-cur="ble">
				<button class="cu-btn cuIcon-add bg-black shadow" @click="NavChange" data-cur="ble"></button>
				写文章
			</view> -->
			<view class="action text-gray add-action" @tap="showModal" data-target="modal">
<!-- 				<button class="cu-btn cuIcon-add bg-black shadow" @click="NavChange" data-cur="ble"></button>
				写文章 -->
				<button class="cu-btn cuIcon-add bg-black shadow" @tap="showModal" data-target="modal"></button>
				写文章			
			</view>
			<view class="action" :class="PageCur=='goal'?'text-black':'text-gray'" @click="NavChange" data-cur="goal">
				<view class="cuIcon-remind">
					<view class="cu-tag badge">2</view>
				</view>
				待定
			</view>
			<view class="action" :class="PageCur=='mine'?'text-black':'text-gray'" @click="NavChange" data-cur="mine">
				<view class="cuIcon-my">
					<view class="cu-tag badge"></view>
				</view>
				我的
			</view>
		</view>
		<view class="cu-modal modal" :class="modalName=='modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green" @tap="hideModal">确定</view>
					<view class="action text-blue" @tap="hideModal" style="text-align: right;">取消</view>
				</view>
				<view class="padding-xl">
					<view class="uni-btn-v justify-around flex solid-bottom padding" style="text-align: center;">
						<button class="cu-btn round bg-purple" @click="goWriteDiary">写日记</button>
						<button class="cu-btn round bg-blue" @click="goWritePlan">写计划</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import plan from '@/pages/plan/plan';
	export default {
		components: {
			plan
		},
		data() {
			return {
				PageCur: 'home', //切换菜单
				toPageCur: '', //上次切换的菜单
				isTop:false, //底部菜单是否在最顶层
				modalName:null,
			}
		},
		onLoad: function (option) {
			console.log(option.hasOwnProperty("PageCur"))
			if(option.hasOwnProperty("PageCur")){
				console.log("option应用首页打开初始参："+JSON.stringify(option));
				this.PageCur = option.PageCur;
			}else{
				console.log("应用首页打开初始参："+JSON.stringify(option));
			}			
		},
		methods: {
			NavChange: function(e) {
				//底部菜单切换
				this.PageCur = e.currentTarget.dataset.cur
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			goWriteDiary(){
				console.log("进入日记编辑界面")
				uni.navigateTo({
				    url: './home/saveDiary'
				});
			},
			goWritePlan(){
				console.log("进入计划编辑界面")
				uni.navigateTo({
				    url: './plan/savePlan'
				});
			}
			
		},
		watch:{
			//监听菜单变化
			'PageCur': function(newVal){
				
				var _this=this
				if(newVal=="ble"){
					//如果切换的蓝牙 就把底部菜单设为最顶层 避免蓝牙处弹出提示不方便切换菜单
					_this.isTop=true
				}else{
					_this.isTop=false
				}
				
				//如果上一次切换的菜单是蓝牙，但是本次切换不是蓝牙，就关闭蓝牙搜索
				if(newVal!="ble" && _this.toPageCur=="ble"){
					uni.stopBluetoothDevicesDiscovery({
					  success(res) {
						console.log("关闭蓝牙搜索"+res)
					  }
					})
				}
				_this.toPageCur=newVal //赋值上一次切换的菜单
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../style/color/color.scss";
	
	.mainIndex{
		padding-bottom:128upx;
	}
	.text-black{
		color: $blackColor !important;
	}
	.bg-black{
		background: $blackColor !important;
	}
	
	.cu-bar.tabbar.shadow {
		-webkit-box-shadow: 0 0.5px 36px 0 rgba(43,86,112,.2) !important;
		box-shadow: 0 0.5px 36px 0 rgba(43,86,112,.2) !important;
	}
</style>
